<template>
	<div class="scene-info">
		<el-tabs v-model="activeName" @tab-click="changeUserTab">
			<el-tab-pane v-if="showTab === 'info'" :label="getLabel" name="sceneInfo">
				<div class="scene-head">
					<p class="scene-label">
						<i class="blue-line"></i>
						<span>基本信息</span>
					</p>
					<p class="create-time">
						<span>创建时间：</span>
						<span>{{ sceneData.createdAt }}</span>
					</p>
					<p class="create-person">
						<span>创建人ID：</span>
						<span>{{ sceneData.createdUserId }}</span>
					</p>
				</div>
				<div class="scene-conetent">
					<p class="scene-label">
						<i class="blue-line"></i>
						<span>业务场景配置项</span>
					</p>
					<Table :tableData="sceneSetData">
						<template slot="status">
							<el-table-column width="200px" align="center" label="状态">
								<template slot-scope="scope">
									<span class="table-status" v-if="scope.row.type === 'asr'">{{ enableAsr ? '开启' : '关闭' }}</span>
									<span class="table-status" v-else-if="scope.row.type === 'ttsBroadcast'">{{ isShowttsBroadcast ? '开启' : '关闭' }}</span>
									<span class="table-status" v-else-if="scope.row.type === 'realtimeQuality'">{{ isShowQualityTesting ? '开启' : '关闭' }}</span>
									<span class="table-status" v-else-if="scope.row.type === 'autoRecordMixedStream'">{{ isAutoRecordMixedStream ? '开启' : '关闭' }}</span>
									<span class="table-status" v-else-if="scope.row.type === 'sessionSummary'">{{ isSessionSummaryEnabled ? '开启' : '关闭' }}</span>
									<span class="table-status" v-else>{{ scope.row.status ? '已编辑' : '未编辑' }}</span>
								</template>
							</el-table-column>
						</template>
						<template slot="details">
							<el-table-column width="280px" align="center" label="详情">
								<template slot-scope="scope">
									<template v-if="scope.row.id === 1">
										<el-link v-if="details.aiBizflow" type="primary" class="detail-link" @click="aIWorkFlowDetail(scope.row)">{{ sceneData.sceneName }}</el-link>
										<span v-else>- -</span>
									</template>
									<template v-if="scope.row.id === 2">
										<el-link v-if="details.humanBizflow" type="primary" class="detail-link" @click="workFlowDetail(scope.row)">{{ details.humanBizflow }}</el-link>
										<span v-else>- -</span>
									</template>
									<template v-if="scope.row.id === 3">
										<el-link v-if="getDefaultPolicy(details.schedPolicy.defaultPolicy)" type="primary" class="detail-link" @click="schedPolicyDetail(scope.row)">
											{{ getDefaultPolicy(details.schedPolicy.defaultPolicy) }}</el-link
										>
										<span v-else>- -</span>
									</template>
									<template v-if="scope.row.id === 4">
										<div v-if="details.form.length > 0" style="word-break: keep-all; white-space: nowrap">
											<el-link
												type="primary"
												class="detail-link"
												style="padding: 0 5px"
												:underline="false"
												v-for="item in firstArray"
												:key="item.id"
												@click="formDetail(item.id)"
												>{{ item.name }}</el-link
											>
											<el-popover v-if="nameStr.length > 19" placement="bottom-start" width="287" trigger="hover">
												<slot>
													<el-link type="primary" class="detail-link" style="color: #6384fe; padding: 0 5px" :underline="false" v-for="item in secondArray" :key="item.id">
														<span style="border-bottom: 1px solid #6384fe" @click="formDetail(item.id)">{{ item.name }}</span>
													</el-link>
												</slot>
												<span slot="reference">...</span>
											</el-popover>
										</div>
										<p v-else>
											<span>- -</span>
										</p>
									</template>
									<template v-if="scope.row.id === 5">
										<el-popover v-if="details.agentGroup.length > 0" placement="top-start" width="200" trigger="hover" :content="details.agentGroupLineText">
											<span class="agentGroupLine" slot="reference">{{ details.agentGroupLineText }}</span>
										</el-popover>
										<p v-else>
											<span>- -</span>
										</p>
									</template>
									<template v-if="scope.row.id === 6">
										<el-link v-if="details.videoRecord" type="primary" class="detail-link" @click="videoFileDetail(scope.row)">
											{{ details.videoRecord.storageType === 'ali' ? 'ali（阿里OSS）' : details.videoRecord.storageType === 'aws' ? 'aws' : 'nas（本地磁盘录制）' }}</el-link
										>
										<span v-else>- -</span>
									</template>
									<template v-if="scope.row.id === 7 || scope.row.id === 15">
										<span>- -</span>
									</template>
									<template v-if="scope.row.id === 8">
										<span v-show="drawTextOptions.agent">坐席端；</span>
										<span v-show="drawTextOptions.customer">访客端；</span>
										<span v-show="drawTextOptions.recording">录像文件</span>
										<span v-if="!drawTextOptions.agent && !drawTextOptions.customer && !drawTextOptions.recording">- -</span>
									</template>
									<template v-if="scope.row.id === 9">
										<p class="testimoney" v-if="JSON.stringify(details.testimoney) !== '{}'">
											<span>{{ details.testimoney.message }}</span>
										</p>
										<p v-else>
											<span>- -</span>
										</p>
									</template>
									<template v-if="scope.row.id === 10">
										<el-link type="primary" class="detail-link" style="padding: 0 5px" :underline="false" @click="customerMessage(scope.row)" :disabled="currentSceneStatus"
											>客户信息;</el-link
										>
										<el-link type="primary" class="detail-link" style="padding: 0 5px" :underline="false" @click="businessMessage(scope.row)" :disabled="currentSceneStatus"
											>业务信息;</el-link
										>
									</template>
									<template v-if="scope.row.id === 11 || scope.row.id === 14 || scope.row.id === 16">
										<el-link type="primary" class="detail-link" style="padding: 0 5px" :underline="false" @click="edit({ ...scope.row, canEdit: false })">查看</el-link>
									</template>
									<template v-if="scope.row.id === 12">
										<span>{{ ringTime ? ringTime + '秒' : ' 无限长' }}</span>
									</template>
									<template v-if="scope.row.id === 13">
										<el-link type="primary" class="detail-link" style="padding: 0 5px" :underline="false" @click="lookOver(scope.row)">查看</el-link>
									</template>
								</template>
							</el-table-column>
						</template>
						<template slot="btn">
							<el-table-column width="200px" align="center" label="操作">
								<template slot-scope="scope">
									<div
										v-if="
											scope.row.type !== 'asr' &&
											scope.row.type !== 'caption' &&
											scope.row.type !== 'ttsBroadcast' &&
											scope.row.type !== 'variable' &&
											scope.row.type !== 'realtimeQuality' &&
											scope.row.type !== 'businessResources' &&
											scope.row.type !== 'autoRecordMixedStream' &&
											scope.row.type !== 'sessionSummary'
										"
									>
										<el-button
											size="mini"
											class="edit-btn"
											:class="currentSceneStatus ? 'disabled' : ''"
											:disabled="currentSceneStatus"
											@click="edit(scope.row)"
											v-if="(scope.row.type == 'edit' && !scope.row.status) || scope.row.type === 'deposition'"
											>编辑</el-button
										>
										<el-button
											size="mini"
											class="re-edit-btn"
											:class="currentSceneStatus ? 'disabled' : ''"
											:disabled="currentSceneStatus"
											@click="reEdit(scope.row)"
											v-else-if="scope.row.type == 'edit' && scope.row.status"
											>重新编辑</el-button
										>

										<el-button size="mini" class="edit-btn" :class="currentSceneStatus ? 'disabled' : ''" :disabled="currentSceneStatus" @click="bind(scope.row)" v-else
											>绑定</el-button
										>
									</div>
									<!-- 人工通话ASR 的启用停用按钮  -->
									<div v-else-if="scope.row.type === 'asr'">
										<el-button
											size="mini"
											:class="!enableAsr ? 'edit-btn' : 'stop-btn'"
											:disabled="currentSceneStatus"
											:style="currentSceneStatus ? 'background-color: #999' : ''"
											@click="changeASRBtnStatus(scope.row)"
											v-if="scope.row.type == 'asr'"
											>{{ !enableAsr ? '启用' : '停用' }}</el-button
										>
									</div>
									<!-- 字幕配置按钮 -->
									<div v-else-if="scope.row.type === 'caption' || scope.row.type === 'variable'">
										<el-button
											size="mini"
											class="edit-btn"
											:class="currentSceneStatus ? 'disabled' : ''"
											:disabled="currentSceneStatus"
											@click="captionConfig(scope.row)"
											v-if="scope.row.type == 'caption' || scope.row.type === 'variable'"
											>配置</el-button
										>
									</div>
									<!-- 人工坐席TTS辅助播报按钮启用停用 -->
									<!-- <div v-else-if="scope.row.type === 'ttsBroadcast'">
										<el-button
											size="mini"
											class="edit-btn"
											:class="currentSceneStatus ? 'disabled' : ''"
											:style="currentSceneStatus || isShowttsBroadcast ? 'background-color: #999' : ''"
											:disabled="currentSceneStatus || isShowttsBroadcast"
											@click="edit(scope.row)"
											>编辑</el-button
										>
										<el-button
											size="mini"
											:class="!isShowttsBroadcast ? 'edit-btn' : 'stop-btn'"
											:disabled="currentSceneStatus"
											:style="currentSceneStatus ? 'background-color: #999' : ''"
											@click="changeTTSBroadcastBtnStatus(scope.row)"
											v-if="scope.row.type === 'ttsBroadcast'"
											>{{ !isShowttsBroadcast ? '启用' : '停用' }}</el-button
										>
									</div> -->
									<div v-else-if="scope.row.type === 'realtimeQuality'">
										<el-button
											size="mini"
											class="edit-btn"
											:class="currentSceneStatus ? 'disabled' : ''"
											:style="currentSceneStatus || isShowQualityTesting ? 'background-color: #999' : ''"
											:disabled="currentSceneStatus || isShowQualityTesting"
											@click="editQualityTesting(scope.row)"
											>编辑</el-button
										>
										<el-button
											size="mini"
											:class="!isShowQualityTesting ? 'edit-btn' : 'stop-btn'"
											:style="currentSceneStatus ? 'background-color: #999' : ''"
											:disabled="currentSceneStatus"
											@click="changeQualityTestingBtnStatus(scope.row)"
											>{{ !isShowQualityTesting ? '启用' : '停用' }}</el-button
										>
									</div>
									<!-- 业务资料 -->
									<div v-else-if="scope.row.type === 'businessResources'">
										<el-button
											size="mini"
											class="edit-btn"
											:class="currentSceneStatus ? 'disabled' : ''"
											:style="currentSceneStatus ? 'background-color: #999' : ''"
											:disabled="currentSceneStatus"
											@click="gotoBusinessResources(scope.row)"
											>编辑</el-button
										>
									</div>
									<!-- 自动双录  -->
									<div v-else-if="scope.row.type === 'autoRecordMixedStream'">
										<el-button
											size="mini"
											:class="!isAutoRecordMixedStream ? 'edit-btn' : 'stop-btn'"
											:disabled="currentSceneStatus"
											:style="currentSceneStatus ? 'background-color: #999' : ''"
											@click="changeAutoRecordMixedStream(scope.row)"
											>{{ !isAutoRecordMixedStream ? '启用' : '停用' }}</el-button
										>
									</div>
									<!-- 会话小结 -->
									<div v-else-if="scope.row.type === 'sessionSummary'">
										<el-button
											size="mini"
											class="edit-btn"
											:class="currentSceneStatus ? 'disabled' : ''"
											:style="currentSceneStatus || isSessionSummaryEnabled ? 'background-color: #999' : ''"
											:disabled="currentSceneStatus || isSessionSummaryEnabled"
											@click="editSessionSummary(scope.row)"
											>编辑</el-button
										>
										<el-button
											size="mini"
											:class="!isSessionSummaryEnabled ? 'edit-btn' : 'stop-btn'"
											:style="currentSceneStatus ? 'background-color: #999' : ''"
											:disabled="currentSceneStatus"
											@click="changeSessionSummaryStatus(scope.row)"
											>{{ !isSessionSummaryEnabled ? '启用' : '停用' }}</el-button
										>
									</div>
								</template>
							</el-table-column>
						</template>
					</Table>
					<BindDialog
						v-if="showBindDialog"
						:showBindDialog="showBindDialog"
						@closeBindDialog="closeBindDialog"
						@changeSelect="changeGroupSelect"
						@currentChange="currentGroupChange"
						@changeCurrentPage="changeGroupListPage"
						@changePageSize="changeGroupListPageSize"
						:groupsList="groupsChekedData"
						ref="groupTable"
						@saveGroup="saveGroup"
					/>
				</div>
				<!-- 绑定表单 -->
				<BindForm
					:showBindForm="showBindForm"
					:formTableData="formTableData"
					@getBindForm="getBindForm"
					@changeSelect="changeFormSelect"
					@currentChange="currentFormChange"
					@changeBindFormPage="changeBindFormPage"
					@cancelBindForm="cancelBindForm"
					@changeBindFormPageSize="changeBindFormPageSize"
					ref="bindForm"
					@viewForm="viewForm"
				/>

				<!-- 编辑派工规则 -->
				<EditWorkRules
					:editWorkRules="editWorkRules"
					v-if="editWorkRules"
					:editWorkRulesData="editWorkRulesData"
					@cancelEditWorkRules="cancelEditWorkRules"
					@addEditWorkRules="addEditWorkRules"
					@removeEditRules="removeEditRules"
					@getEditWorkRules="getEditWorkRules"
					@cancelEditCustomProp="cancelEditCustomProp"
					:showDetail="showDetail"
				/>

				<!-- 编辑人工工作流 -->
				<AddWorkFlow v-if="showAddWorkFlow" :showAddWorkFlow="showAddWorkFlow" @closeAddWorkFlow="closeAddWorkFlow" @getAddWorkFlow="getAddWorkFlow" />
				<EditWorkFlow
					v-if="showEditWorkFlow"
					:showEditWorkFlow="showEditWorkFlow"
					:editData="editAgentFlowData"
					@getEditWorkFlow="getEditWorkFlow"
					@closeEditWorkFlow="closeEditWorkflow"
					:showDetail="showDetail"
				/>
				<!-- 业务表单详情 -->
				<el-dialog class="form-wrapper" title="查看表单" :visible.sync="viewFormTips" width="50%" :before-close="cancelViewForm" append-to-body>
					<iframe v-if="viewFormTips" allowTransparency="true" class="iframelink" width="100%" height="100%" :src="formRemotelinkurl"></iframe>
				</el-dialog>

				<!-- 录像文件存储配置 -->
				<VideoFileStorageConfiguration :showVideoFile="showVideoFile" :videoFileData="videoFileData" :showDetail="showDetail" @closevideoFile="closevideoFile" @surevideoFile="surevideoFile" />

				<!-- 字幕配置组件 -->
				<CaptionConfig :showCaptionDialog="showCaptionDialog" :drawTextOptions="drawTextOptions" @cancelCaption="cancelCaption" @saveCaption="saveCaption" />

				<!-- 进电振铃时长设置 -->
				<RingingDuration :showRingingDuration="showRingingDuration" :ringTime="ringTime" @cancelRingDuration="cancelRingDuration" @saveRingDuration="saveRingDuration" />
			</el-tab-pane>
		</el-tabs>
		<EditSessionSummary v-if="showSessionSummary" :showDetail="showDetail" :visible="showSessionSummary" @close="showSessionSummary = false" />
	</div>
</template>

<script>
import { mapMutations, mapState, mapActions } from 'vuex';
import Table from '../components/Table.vue';
import BindDialog from './BindDialog.vue';
import BindForm from './BindForm.vue';
import AddWorkFlow from './AddWorkFlow.vue';
import EditWorkFlow from './EditWorkFlow.vue';
import EditWorkRules from './EditWorkRules.vue';
import { validateGroupName } from '@/utils/formValidate';
import { filterAgentNameByGroups } from '@/utils/filterAgents';
import {
	updateWorkflowStep,
	getHumanflowById,
	getFormTemplateList,
	getGroupsDetails,
	setBizscenariosProfile,
	getBizscenariosInfo,
	getAttributeKeys,
	getSceneFormDetail,
	setEnableAsr,
	setDrawTextOptions,
	setAgentTtsOption,
	setRingingDuration,
	setIsRealTimeQualityOn,
	setSystemRecordOn,
	createWorkflowStep,
	setSessionSummaryStatus
} from '../../api/api';
import { spliceFormList } from '../../utils/tool.js';
import VideoFileStorageConfiguration from './sceneComponets/VideoFileStorageConfiguration.vue';
import CaptionConfig from './sceneComponets/CaptionConfig.vue';
import RingingDuration from './sceneComponets/RingingDuration.vue';
import AIWorkflow from '@/modules/workFlow.js';
import EditSessionSummary from './EditSessionSummary.vue';

export default {
	components: {
		Table,
		BindDialog,
		BindForm,
		AddWorkFlow,
		EditWorkFlow,
		EditWorkRules,
		VideoFileStorageConfiguration,
		CaptionConfig,
		RingingDuration,
		EditSessionSummary
	},

	// 监听路由变化
	watch: {
		$route: {
			handler: function () {
				this.sceneData = JSON.parse(sessionStorage.getItem('sceneData'));
				this.currentSceneStatus = JSON.parse(localStorage.getItem('sceneStatus'));
				this.initBizscenariosList();
			},
			deep: true
		}
	},
	data() {
		return {
			// 配置项数据
			activeName: 'sceneInfo',
			showTab: 'info',
			sceneSetData: {
				sort: false,
				showIndex: false,
				showCheck: false,
				tableHead: [
					{
						label: '配置项',
						prop: 'flowName'
					}
				],
				tableConent: [
					{
						id: 1,
						flowName: 'AI坐席工作流',
						status: false,
						type: 'edit'
					},
					{
						id: 2,
						flowName: '人工坐席工作流',
						status: false,
						type: 'edit'
					},
					{
						id: 3,
						flowName: '派工规则',
						status: false,
						type: 'edit'
					},
					{
						id: 4,
						flowName: '业务表单',
						status: false,
						type: 'bind'
					},
					{
						id: 5,
						flowName: '坐席技能组',
						status: false,
						type: 'bind'
					},
					{
						id: 6,
						flowName: '录像文件存储配置',
						status: true,
						type: 'bind'
					},
					{
						id: 7,
						flowName: '人工通话ASR（语音转文字）',
						status: false,
						type: 'asr'
					},
					{
						id: 8,
						flowName: '字幕配置',
						status: true,
						type: 'caption'
					},
					{
						id: 9,
						flowName: '抄录证言',
						status: false,
						type: 'deposition'
					},
					{
						id: 10,
						flowName: '场景变量',
						status: true,
						type: 'variable'
					},
					// {
					// 	id: 11,
					// 	flowName: '人工坐席TTS辅助播报',
					// 	status: true,
					// 	type: 'ttsBroadcast'
					// },
					{
						id: 12,
						flowName: '进电振铃时长',
						status: false,
						type: 'edit'
					},
					{
						id: 13,
						flowName: '实时质检',
						status: false,
						type: 'realtimeQuality'
					},
					{
						id: 14,
						flowName: '业务资料',
						status: false,
						type: 'businessResources'
					},
					{
						id: 15,
						flowName: '自动双录',
						status: false,
						type: 'autoRecordMixedStream'
					},
					{
						id: 16,
						flowName: '会话小结',
						status: false,
						type: 'sessionSummary'
					}
				]
			},
			editStatus: false,
			reEditStatus: false,
			bindStatus: false,
			// 人工坐席流数据
			showAddWorkFlow: false,
			// 编辑人工坐席工作流状态
			showEditWorkFlow: false,
			// 编辑人工工作流数据
			editAgentFlowData: {},
			// 派工规则数据
			editWorkRules: false,
			editWorkRulesData: {
				name: '',
				groupsId: '',
				customizedPolicy: [],
				defaultPolicy: 'least-used',
				rulesProp: [],
				customAttributes: [],
				groupNameRules: [
					{ required: true, message: '请填写分组名称', trigger: ['change', 'blur'] },
					{ validator: validateGroupName, trigger: ['blur', 'change'] }
				],
				groupWorkRules: [{ required: true, message: '请选择派工规则', trigger: ['change'] }]
			},

			// 绑定业务表单数据
			showBindForm: false,
			formTableData: {
				sort: false,
				checkedGroup: true,
				tableHead: [
					{
						label: '表单名称',
						prop: 'fromName'
					},
					{
						label: '创建时间',
						prop: 'createdAt'
					}
				],
				tableConent: [],
				showIndex: false,
				showCheck: true,
				checkData: {
					page: 1,
					pageSize: 10,
					total: 0,
					isEmpty: true //为true显示所有表单并且表单里面有内容，为false显示未编辑或者表单内容为空
				}
			},
			// 已经选中表单
			selectedFrom: [],
			// 当前选中表单
			currentSelectedForm: [],
			sceneData: JSON.parse(sessionStorage.getItem('sceneData')),
			// 当前选中人工工作流
			currentSelectedAgentFlow: null,
			// 技能组绑定状态
			showBindDialog: false,
			// 技能组查询条件
			groupsChekedData: {
				page: 1,
				pageSize: 10,
				total: 0,
				scenarioId: this.$route.params.id,
				tableData: {
					sort: false,
					showCheck: true,
					showIndex: true,
					tableHead: [
						{
							label: '技能组名称',
							prop: 'name'
						},
						{
							label: '技能组成员',
							prop: 'agentsName'
						}
					],
					tableConent: []
				}
			},
			// 默认变量
			defualtVariables: [
				{
					key: 'fullName',
					name: '姓名'
				},
				{
					key: 'gender',
					name: '性别'
				}
			],
			showDetail: false, //详情显示隐藏
			// 详情
			details: {
				agentGroup: [], //坐席技能组
				aiBizflow: '', //AI坐席工作流
				form: [], //业务表单
				humanBizflow: '', //人工坐席工作流
				// 派工规则
				schedPolicy: {
					customizedPolicy: [],
					defaultPolicy: ''
				},
				testimoney: {}, //证言详情
				videoRecord: {} //配置录像文件存储类型
			},
			viewFormTips: false, // 表单查看详情显示隐藏
			firstArray: [], //表单名称没有超过20个字的时候显示表单
			secondArray: [], //表单名称超过20个字，鼠标点击(...)后显示剩余未展示的表单
			nameStr: '', //表单名称长度

			formRemotelinkurl: '', //表单预览地址
			// 绑定 录像文件存储配置的数据
			showVideoFile: false,
			videoFileData: {
				modelForm: {
					type: 'ali', //选择的相关类型
					isEdit: false, //Radio 单选框选择的相关业务类型默认隐藏，
					localDisk: '',
					nasUrl: '',
					aliossUrl: '',
					awsUrl: ''
				},
				radioData: [
					{
						id: 1,
						type: 'nas',
						title: 'nas(本地磁盘录制)'
					},
					{
						id: 2,
						type: 'ali',
						title: 'ali(阿里OSS)'
					},
					{
						id: 3,
						type: 'aws',
						title: 'aws'
					}
				]
			},
			enableAsr: false, //是否开启 asr
			// 字幕配置数据
			showCaptionDialog: false,
			drawTextOptions: {
				agent: true,
				customer: true,
				recording: true
			},
			isShowttsBroadcast: false, //是否开启TTS辅助播报
			// 进电振铃时长设置 数据
			showRingingDuration: false,
			ringTime: '',
			// 实时质检数据结构
			isShowQualityTesting: false,
			currentSceneStatus: false,
			isAutoRecordMixedStream: true,
			isSessionSummaryEnabled: false, // 会话小结是否开启s
			showSessionSummary: false, // 会话小结配置弹窗
			sessionSummaryStatus: false // 会话小结状态
		};
	},
	mounted() {
		this.initBizscenariosList();
		this.currentSceneStatus = JSON.parse(localStorage.getItem('sceneStatus'));
		console.log('currentSceneStatus :', this.currentSceneStatus);
	},
	computed: {
		...mapState({
			agentGroup: state => state.sceneInfo.agentGroup,
			agentForm: state => state.sceneInfo.form,
			schedPolicy: state => state.sceneInfo.schedPolicy,
			humanBizflow: state => state.sceneInfo.humanBizflow,
			aiBizflow: state => state.sceneInfo.aiBizflow,
			groupList: state => state.sceneInfo.groupList,
			nonInitVariableList: state => state.associatedVariable.nonInitVariableList,
			invalidVariableList: state => state.associatedVariable.invalidVariableList
		}),
		getLabel() {
			return `${this.sceneData.sceneName}详情`;
		}
	},
	methods: {
		...mapMutations('menu', [
			'SET_TAG_LIST',
			'SET_AI_BIZ_FLOW',
			'SET_HUMAN_BIZ_FLOW',
			'SET_AGENT_GROUP',
			'SET_AGENT_FORM',
			'SET_SCHED_POLICY',
			'SET_CUSTOMIZED_POLICY',
			'SET_DEFAULT_POLICY',
			'SET_GROUP_LIST',
			'SET_CAPTION_CONFIG'
		]),
		...mapActions('associatedVariable', ['SET_NON_INIT_VARIABLE_LIST', 'SET_INVALID_VARIABLE_LIST']),
		// 获取业务场景详情
		initBizscenariosList() {
			getBizscenariosInfo(this.sceneData.id)
				.then(res => {
					if (res.status === 200) {
						this.currentSceneStatus = res.data.status || false;
						const { agentGroup, aiBizflow, form, humanBizflow, schedPolicy, existMaterial, isSystemRecordOn, isSummaryOn } = res.data.profiles;
						this.$store.commit('SET_AGENT_GROUP', agentGroup);
						this.$store.commit('SET_AI_BIZ_FLOW', aiBizflow);
						this.$store.commit('SET_AGENT_FORM', form);
						this.$store.commit('SET_SCHED_POLICY', schedPolicy);
						this.$store.commit('SET_HUMAN_BIZ_FLOW', humanBizflow);
						this.selectedFrom = form;
						this.isSessionSummaryEnabled = isSummaryOn === 'Y';

						// 根据不同的type  回显录像文件存储配置的数据
						const videoRecord = res.data.details.videoRecord;
						this.videoFileData.modelForm.type = videoRecord.storageType;
						if (this.videoFileData.modelForm.type === 'nas') {
							this.videoFileData.modelForm.localDisk = videoRecord.nasBasePath;
							this.videoFileData.modelForm.nasUrl = videoRecord.notifyURL;
							this.videoFileData.modelForm.aliossUrl = '';
							this.videoFileData.modelForm.awsUrl = '';
						}
						if (this.videoFileData.modelForm.type === 'ali') {
							this.videoFileData.modelForm.aliossUrl = videoRecord.notifyURL;
							this.videoFileData.modelForm.awsUrl = '';
							this.videoFileData.modelForm.localDisk = '';
							this.videoFileData.modelForm.nasUrl = '';
						}
						if (this.videoFileData.modelForm.type === 'aws') {
							this.videoFileData.modelForm.awsUrl = videoRecord.notifyURL;
							this.videoFileData.modelForm.aliossUrl = '';
							this.videoFileData.modelForm.localDisk = '';
							this.videoFileData.modelForm.nasUrl = '';
						}
						// console.log(videoRecord, 'videoRecord');

						if (this.aiBizflow !== 0) {
							this.sceneSetData.tableConent[0].status = true;
						} else {
							this.sceneSetData.tableConent[0].status = false;
						}
						if (this.humanBizflow !== 0) {
							this.sceneSetData.tableConent[1].status = true;
						} else {
							this.sceneSetData.tableConent[1].status = false;
						}
						if (existMaterial) {
							this.sceneSetData.tableConent[12].status = existMaterial;
						} else {
							this.sceneSetData.tableConent[12].status = false;
						}
						this.isAutoRecordMixedStream = isSystemRecordOn;
						if (this.schedPolicy) {
							this.editWorkRulesData.customizedPolicy = JSON.parse(JSON.stringify(this.schedPolicy.customizedPolicy));
							this.editWorkRulesData.defaultPolicy = JSON.parse(JSON.stringify(this.schedPolicy.defaultPolicy));
							this.sceneSetData.tableConent[2].status = true;
							this.editWorkRulesData.customizedPolicy.forEach(item => {
								if (item.rules instanceof Array) {
									item.customizedRules = item.rules.join();
									item.rules = 'customized';
								}
							});
						} else {
							this.sceneSetData.tableConent[2].status = false;
						}
						if (this.agentForm.length > 0) {
							this.sceneSetData.tableConent[3].status = true;
						} else {
							this.sceneSetData.tableConent[3].status = false;
						}
						if (this.agentGroup.length > 0) {
							this.sceneSetData.tableConent[4].status = true;
						} else {
							this.sceneSetData.tableConent[4].status = false;
						}
						const data = res.data.details;
						this.details = {
							agentGroup: data.agentGroup,
							agentGroupLineText: (() => {
								let result = '';
								data.agentGroup?.forEach(value => {
									result += value.name + '，';
								});
								if (result.length > 1) {
									return result.substring(0, result.length - 1);
								} else {
									return '--';
								}
							})(),
							aiBizflow: data.aiBizflow,
							form: data.form,
							humanBizflow: data.humanBizflow,
							schedPolicy: data.schedPolicy ? data.schedPolicy : '',
							videoRecord: data.videoRecord,
							testimoney: data.testimoney ? data.testimoney : {}
						};
						if (JSON.stringify(this.details.testimoney) !== '{}') {
							this.sceneSetData.tableConent[8].status = true;
						} else {
							this.sceneSetData.tableConent[8].status = false;
						}
						// console.log(this.details.videoRecord, '配置录像文件存储类型');
						let result = spliceFormList(this.details.form, 20);
						this.firstArray = result.firstArray;
						this.secondArray = result.secondArray;
						this.nameStr = this.details.form
							.map(item => {
								return item.name;
							})
							.join(';');
						// console.log('详情', this.details);
						// console.log('业务表单长度', this.nameStr.length);
						const { isHumanAsrOn, drawTextOptions, agentTtsOption, isRealTimeQualityOn } = res.data.details;
						console.log('details:', res.data.details);
						
						// console.warn('details:', isHumanAsrOn, drawTextOptions, agentTtsOption);
						if (isHumanAsrOn || drawTextOptions || agentTtsOption || isRealTimeQualityOn) {
							this.enableAsr = isHumanAsrOn;
							this.drawTextOptions.agent = drawTextOptions.agent;
							this.drawTextOptions.customer = drawTextOptions.customer;
							this.drawTextOptions.recording = drawTextOptions.recording;
							this.isShowttsBroadcast = agentTtsOption;
							this.isShowQualityTesting = isRealTimeQualityOn;
						}
						if (res.data.ringingDuration) {
							this.ringTime = res.data.ringingDuration;
							// console.warn(res.data.ringingDuration, 'ringingDuration');
							if (this.ringTime) {
								this.sceneSetData.tableConent[10].status = true;
							} else {
								this.sceneSetData.tableConent[10].status = false;
							}
						}
						this.sceneSetData.tableConent[9].status = true;
					} else {
						this.$message.error('获取业务场景失败');
					}
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取业务场景失败');
				});
		},
		// 获取业务场景表单
		initFormList() {
			getFormTemplateList(this.formTableData.checkData)
				.then(res => {
					if (res.status === 200) {
						const total = res.data.data.count;
						this.formTableData.checkData.total = total;
						const { data } = res.data.data;
						this.formTableData.tableConent = data.map(item => {
							return {
								id: item.id,
								fromName: item.name,
								fields: item.fields,
								createdAt: this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
								selectable: !!item.fields
							};
						});
					}
					this.showBindForm = true;
				})
				.then(() => {
					this.$nextTick(() => {
						this.formTableData.tableConent.forEach(item => {
							// 删除不可选的表单
							const index = this.selectedFrom.findIndex(id => id === item.id && !item.selectable);
							if (index > -1) {
								this.selectedFrom.splice(index, 1);
							}
							this.selectedFrom.map(id => {
								if (id === item.id && item.selectable) {
									this.$refs.bindForm.$refs.tableEle.$refs.singleTable.toggleRowSelection(item, true);
								}
							});
						});
					});
				})
				.catch(err => {
					this.$Spin.hide();
					console.log(err);
					this.$message.error('业务场景列表初始化失败');
				});
		},
		// 获取技能组列表初始化
		initGroupDetailList() {
			const { meta, name, path } = this.$route;
			let menu = {
				meta: {}
			};
			menu.name = `${this.sceneData.sceneName}/${this.sceneData.id}/绑定分组`;
			menu.meta.jumpNo = meta.jumpNo + 1;
			menu.meta.sceneName = this.sceneData.sceneName;
			menu.meta.keepAlive = false;
			menu.meta.title = `${this.sceneData.sceneName} -- 绑定分组`;
			menu.meta.data = this.sceneData;
			menu.meta.toPath = `${meta.toPath}/${this.sceneData.id}/bindgroups2scene`;
			menu.path = `${path}/bindgroups2scene`;
			// fixme: 由于点击 menu 菜单中不同的 ‘绑定分组’ 不会触发更新操作，所以这里不要添加到 menu 菜单中
			// this.$store.commit('SET_TAG_LIST', menu);
			this.$router.push({ name: 'bindGroupsToScene', meta: menu.meta, params: { id: this.sceneData.id, title: menu.meta.title } });
			return;
			getGroupsDetails(this.groupsChekedData)
				.then(res => {
					if (res.status === 200) {
						this.groupsChekedData.total = res.data.count;
						const list = res.data.list.map(item => {
							return {
								name: item.name,
								id: item.id,
								agents: item.agents,
								agentsName: item.agents && item.agents.filter(v => v.uaerName !== null) ? filterAgentNameByGroups(item.agents) : '-'
							};
						});
						console.warn(list, '获取技能组列表初始化');
						this.$store.commit('SET_GROUP_LIST', list);
						this.groupsChekedData.tableData.tableConent = JSON.parse(JSON.stringify(list));
						this.showBindDialog = true;
					}
				})
				.then(() => {
					this.$nextTick(() => {
						this.groupsChekedData.tableData.tableConent.forEach(item => {
							this.agentGroup.map(id => {
								if (id === item.id) {
									this.currentSelectedForm.push(item.id);
									this.$refs.groupTable.$refs.tableEle.$refs.singleTable.toggleRowSelection(item, true);
								}
							});
						});
					});
				})
				.catch(() => {
					this.$message.error('技能组列表初始化失败');
				});
		},
		edit(row) {
			switch (row.id) {
				case 1:
					this.submitFormData('aiBizflow');
					break;
				case 2:
					this.showAddWorkFlow = true;
					break;
				case 3:
					this.initAttributeKeys();
					this.editWorkRules = true;
					break;
				case 9:
					this.$router.push({ name: 'deposition', params: { id: this.sceneData.id } });
					break;
				case 11:
					this.$router.push({ name: 'ttsbroadcast', params: { id: this.sceneData.id }, query: { canEdit: row.canEdit === undefined ? true : row.canEdit } });
					break;
				case 12:
					this.initBizscenariosList();
					this.showRingingDuration = true;
					break;
				case 14:
					this.$router.push({ name: 'businessResources', params: { id: this.sceneData.id }, query: { canEdit: row.canEdit === undefined ? true : row.canEdit } });
					break;
				case 16:
					this.$router.push({ name: 'sessionSummary', params: { id: this.sceneData.id }, query: { canEdit: row.canEdit === undefined ? true : row.canEdit } });
					break;
				default:
					row.status = !row.status;
					break;
			}
		},
		// 重新编辑
		reEdit(row) {
			switch (row.id) {
				case 1:
					this.submitFormData('aiBizflow');
					break;
				case 2:
					this.editWorkFlow(this.humanBizflow);
					break;
				case 3:
					this.initAttributeKeys();
					this.initBizscenariosList();
					this.editWorkRules = true;
					break;
				case 9:
					this.$router.push({ name: 'deposition', params: { id: this.sceneData.id } });
					break;
				case 11:
					this.$router.push({ name: 'ttsbroadcast', params: { id: this.sceneData.id } });
					break;
				case 12:
					this.initBizscenariosList();
					this.showRingingDuration = true;
					break;
				default:
					row.status = !row.status;
					break;
			}
		},
		// 绑定
		bind(row) {
			switch (row.id) {
				case 4:
					this.initFormList();
					break;
				case 5:
					this.initGroupDetailList();
					break;
				case 6:
					this.showVideoFile = true;
					this.showDetail = false;
					this.initBizscenariosList();
					break;
				default:
					row.status = !row.status;
					break;
			}
		},
		closeBindDialog() {
			this.showBindDialog = false;
			this.$emit('closeBindDialog');
		},
		getBindForm() {
			const ids = this.selectedFrom;
			if (ids.length <= 10) {
				this.submitFormData('form', { value: ids });
				this.showBindForm = false;
			} else {
				this.$message.error('该业务场景下最多绑定10个表单!');
			}
		},
		cancelBindForm() {
			this.showBindForm = false;
			this.initBizscenariosList();
		},
		cancelBindAgentFlow() {
			this.showAddWorkFlow = false;
		},

		/**
		 * 提交业务场景配置项
		 * @param type 添加类型
		 * @param value 添加数据
		 */
		submitFormData(type, value) {
			let data = {};
			data.id = this.sceneData.id || this.$route.params.id;
			data.profileType = type;
			data.value = value ? value : {};
			setBizscenariosProfile(data)
				.then(res => {
					if (res.status === 200) {
						if (res.data.result.aiBizflow) {
							const { aiBizflow } = res.data.result;
							this.$router.push({
								name: 'newFlow',
								params: { id: aiBizflow, title: this.sceneData.sceneName },
								query: { id: aiBizflow, bizscenariosId: this.$route.params.id || this.sceneData.id, detail: false }
							});
							// console.warn(this.$route.query.bizscenariosId, 'bizscenariosId', this.$route.params.id, this.$route.query);
							AIWorkflow.setBusinessId(this.sceneData.id || this.$route.query.bizscenariosId);
							AIWorkflow.setTemplateId(aiBizflow || this.$route.params.id);
							AIWorkflow.setIsDetail(false);
							sessionStorage.setItem('aiBizflowTitle', this.sceneData.sceneName);
						} else if (res.data.result.humanBizflow) {
							const { humanBizflow } = res.data.result;
							this.$store.commit('SET_HUMAN_BIZ_FLOW', humanBizflow);
							this.$message.success('编辑人工工作流成功！');
						} else if (type === 'schedPolicy') {
							this.$message.success('编辑派工规则成功！');
						} else if (type === 'form') {
							this.$message.success('绑定表单成功！');
						} else if (type === 'agentGroup') {
							this.$message.success('绑定技能组成功！');
						} else if (type === 'videoRecord') {
							this.$message.success('绑定配置录像文件存储类型成功！');
						}
						this.initBizscenariosList();
					}
				})
				.catch(e => {
					if (type === 'form') {
						switch (e.code) {
							case '1002':
								this.$message.error('表单被 AI 工作流使用，不能移除!');
								break;
							case '1102':
								this.$message.error('表单被 AI 工作流使用，不可解除绑定!');
								break;
							case '1101':
								this.$message.error('保存表单失败，请求权限拒绝！');
								break;
							case '1201':
								this.$message.error('保存表单失败，该表单正在被使用中！');
								break;
							case 6009:
								this.$message.error('业务场景启用中，无法进行操作！');
								break;
							default:
								this.$message.error(`保存表单失败,${e.message}`);
								break;
						}
					} else if (type === 'agentGroup') {
						switch (e.code) {
							case '1101':
								this.$message.error('保存技能组失败，请求权限拒绝！');
								break;
							case '1201':
								this.$message.error('保存技能组失败，该表单正在被使用中！');
								break;
							case 6009:
								this.$message.error('业务场景启用中，无法进行操作！');
								break;
							default:
								this.$message.error(`保存技能组失败${e.message}`);
								break;
						}
					} else if (e.code == '6009') {
						this.$message.error(`业务场景启用中，无法进行操作！`);
						this.currentSceneStatus = true;
					} else {
						this.$message.error(`提交数据失败, ${e.message}`);
					}

					this.initBizscenariosList();
				});
		},

		// 关闭编辑人工工作流
		closeAddWorkFlow() {
			this.showAddWorkFlow = false;
		},
		// 选择 Form 表单
		changeFormSelect(form, row) {
			if (this.selectedFrom.includes(row.id)) {
				this.selectedFrom = this.selectedFrom.filter(item => item !== row.id);
			} else {
				this.selectedFrom.push(row.id);
			}
		},
		currentFormChange(form) {
			console.log(form);
		},
		// 查询人工工作流
		editWorkFlow(id) {
			getHumanflowById(id)
				.then(res => {
					console.log('getHumanflowById ', res);
					if (res.status === 200) {
						const { data } = res;
						this.editAgentFlowData.name = data.name;
						this.editAgentFlowData.id = id;
						if (data.humanSteps.length > 0) {
							this.editAgentFlowData.steps = data.humanSteps.map(step => {
								return {
									name: step.name,
									humanflowId: step.humanflowId,
									id: step.id,
									isDot: step.isDot,
									content: step.content || ''
								};
							});
						} else {
							this.editAgentFlowData.steps = [{ content: '', isDot: 0, name: '' }];
						}
					}
				})
				.then(() => {
					this.$store.commit('SET_EDIT_WORK_FLOW', this.editAgentFlowData);
					this.showEditWorkFlow = true;
				})
				.catch(err => {
					console.log(err);
					this.$Spin.hide();
					this.$message.error('查询人工工作流失败');
				});
		},
		// 创建人工坐席工作流
		getAddWorkFlow(flow) {
			let data = {};
			// data.id = this.$route.params.id;
			// data.profileType = 'humanBizflow';
			// data.value = {
			// 	value: [
			// 		{ op: 'replace', path: '/flow', value: { name: flow.name } },
			// 		{ op: 'add', path: '/steps', value: flow.steps },
			// 		{ op: 'add', path: '/variables', value: flow.variables }
			// 	]
			// };
			// {
			// "name": "名称24",
			// "steps": [
			// 	{
			// 	"name": "节点名称",
			// 	"content": "话术提示",
			// 	"isDot": false
			// 	},
			// 	{
			// 	"name": "节点名称1",
			// 	"content": "话术提示1",
			// 	"isDot": true
			// 	}
			// ]
			// }
			data = {
				scenarioId: this.$route.params.id,
				name: flow.name,
				steps: flow.steps
			};
			createWorkflowStep(data)
				.then(res => {
					if (res.status === 200) {
						if (res.data.result) {
							const { humanBizflow } = res.data.result;
							this.$store.commit('SET_HUMAN_BIZ_FLOW', humanBizflow);
						}
						this.$message.success('创建人工坐席工作流成功！');
						this.initBizscenariosList();
					} else {
						this.$message.error('创建人工坐席工作流失败！');
					}
				})
				.catch(err => {
					console.log(err);
					if (err.code == '6009') {
						this.$message.error(`业务场景启用中，无法进行操作！`);
						this.currentSceneStatus = true;
					} else {
						this.$message.error('创建人工坐席工作流失败！');
					}
					this.initBizscenariosList();
				});
			this.showAddWorkFlow = false;
		},
		// 确认编辑人工工作流对话框
		getEditWorkFlow(data) {
			updateWorkflowStep(data, this.editAgentFlowData.id)
				.then(res => {
					if (res.status === 200) {
						this.$message.success('修改人工坐席流成功！');
						this.showEditWorkFlow = false;
					}
					this.initBizscenariosList();
				})
				.catch(e => {
					this.$Spin.hide();
					if (e.code == '6009') {
						this.$message.error(`业务场景启用中，无法进行操作！`);
						this.currentSceneStatus = true;
					} else {
						this.$message.error('修改人工坐席流失败!');
					}
				});
		},
		// 关闭编辑人工坐席工作流的对话框
		closeEditWorkflow() {
			this.showEditWorkFlow = false;
			this.$store.commit('SET_EDIT_WORK_FLOW', {});
			this.showDetail = false;
		},
		// 添加自定义派工规则
		addEditWorkRules() {
			this.editWorkRulesData.customizedPolicy.push({ name: '', weight: 0, attribute: '', customizedRules: [], rules: [] });
		},
		// 派工规则相关方法
		cancelEditWorkRules() {
			this.editWorkRules = false;
			this.initAttributeKeys();
			this.showDetail = false;
		},
		removeEditRules(index) {
			this.editWorkRulesData.customizedPolicy.splice(index, 1);
		},
		// 查询所有规则
		initAttributeKeys() {
			getAttributeKeys()
				.then(res => {
					if (res.status === 200) {
						this.editWorkRulesData.rulesProp = res.data.data;
					}
				})
				.catch(err => {
					this.$Spin.hide();
					this.$requestApiError(err, () => {
						this.$router.push('/');
					});
				});
		},
		// 确认绑定派工规则
		getEditWorkRules() {
			let data = {
				value: {}
			};
			data.value.defaultPolicy = this.editWorkRulesData.defaultPolicy;
			data.value.customizedPolicy = this.editWorkRulesData.customizedPolicy;
			this.submitFormData('schedPolicy', data);
			this.editWorkRules = false;
			this.initBizscenariosList();
		},

		// 查询表单分页
		changeBindFormPage(page) {
			this.formTableData.checkData.page = page;
			// this.formTableData.checkData.pageSize = 10;
			this.initFormList();
		},
		changeBindFormPageSize(pageSize) {
			this.formTableData.checkData.pageSize = pageSize;
			this.formTableData.checkData.page = 1;
			this.initFormList();
		},

		// 技能组选择
		changeGroupSelect(group) {
			if (group) {
				this.$store.commit('SET_AGENT_GROUP', [group.id]);
			} else {
				this.$store.commit('SET_AGENT_GROUP', []);
			}
		},
		saveGroup() {
			if (this.agentGroup.length === 0) {
				this.$message.error('请选择一个技能组!');
				return;
			}
			this.submitFormData('agentGroup', { value: this.agentGroup });
			this.showBindDialog = false;
		},
		// 绑定技能组列表分页
		changeGroupListPage(page) {
			this.groupsChekedData.page = page;
			// this.groupsChekedData.pageSize = 10;
			this.initGroupDetailList();
		},
		changeGroupListPageSize(pageSize) {
			this.groupsChekedData.page = 1;
			this.groupsChekedData.pageSize = pageSize;
			this.initGroupDetailList();
		},
		// AI坐席工作流显示详情
		aIWorkFlowDetail() {
			let params = {
				id: this.aiBizflow, //Ai工作流的id
				detail: true,
				bizscenariosId: this.sceneData.id //业务场景ID
			};
			sessionStorage.setItem('aiBizflowTitle', this.sceneData.sceneName);
			AIWorkflow.setIsDetail(true);
			let routerdata = this.$router.resolve({
				name: 'flowDetail'
			});
			let newhref = routerdata.href + `?id=${params.id}&bizscenariosId=${params.bizscenariosId}&detail=${params.detail}&uid=${window.uid}`;
			window.open(newhref, '_blank');
		},
		//人工坐席工作流 详情
		workFlowDetail() {
			this.showDetail = true;
			this.$store.commit('SET_EDIT_WORK_FLOW', this.editAgentFlowData);
			this.editWorkFlow(this.humanBizflow);
		},
		// 派工规则详情
		schedPolicyDetail() {
			this.showDetail = true;
			this.editWorkRules = true;
			this.initAttributeKeys();
			console.log(this.details.schedPolicy.defaultPolicy);
		},
		// 业务表单详情
		formDetail(id) {
			getSceneFormDetail(id)
				.then(res => {
					if (res.status === 200) {
						console.log(res.data);
						this.formRemotelinkurl = `${formUrl}/?id=${id}&token=${localStorage.getItem(`zco_admin_token_${window.uid}`)}&url=${loginUrl}&template=1&hash=${new Date().getTime()}`;
					}
				})
				.then(() => {
					this.viewFormTips = true;
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取表单详情失败');
				});
		},
		// 派工规则筛选
		getDefaultPolicy(value) {
			let result = '';
			switch (value) {
				case 'least-used':
					result = '闲时最长';
					break;
				case 'last-used':
					result = '最近使用';
					break;
				case 'idlest':
					result = '最早使用';
					break;
				case 'random':
					result = '随机';
					break;
				case 'round-robin':
					result = '循环指派';
					break;
				default:
					result = '';
					break;
			}
			return result;
		},
		//自定义排序点击选择属性并排序
		cancelEditCustomProp(value, index) {
			this.editWorkRulesData.customizedPolicy[index].customizedRules = value;
		},
		// 录像文件存储配置的数据  相关事件
		closevideoFile() {
			this.showVideoFile = false;
		},
		videoFileDetail() {
			this.showDetail = true;
			this.showVideoFile = true;
			this.initBizscenariosList();
		},
		surevideoFile() {
			let data = {
				value: {}
			};
			data.value.storageType = this.videoFileData.modelForm.type;
			if (this.videoFileData.modelForm.type === 'nas') {
				data.value.nasBasePath = this.videoFileData.modelForm.localDisk;
				data.value.notifyURL = this.videoFileData.modelForm.nasUrl;
			} else if (this.videoFileData.modelForm.type === 'ali') {
				data.value.notifyURL = this.videoFileData.modelForm.aliossUrl;
			} else if (this.videoFileData.modelForm.type === 'aws') {
				data.value.notifyURL = this.videoFileData.modelForm.awsUrl;
			}
			this.submitFormData('videoRecord', data);
			this.showVideoFile = false;
			this.initBizscenariosList();
		},
		// ASR 的启用停用
		changeASRBtnStatus(row) {
			console.log('changeASRBtnStatus:', row);
			if (row.id === 7) {
				this.enableAsr = !this.enableAsr;
				let enable = {
					enable: this.enableAsr
				};
				setEnableAsr(this.sceneData.id, enable)
					.then(res => {
						if (res.data.success === true && this.enableAsr === true) {
							console.log(res.data);
							this.$message.success('ASR启用成功！');
						}
						if (!this.enableAsr) {
							this.$message.success('ASR停用成功！');
						}
						this.initBizscenariosList();
					})
					.catch(err => {
						console.log(err);
						if (err.code === 6007) {
							this.enableAsr = true;
							this.$message.error('实时质检添加了敏感词检测项，无法关闭！');
						} else if (err.code == 6009) {
							this.$message.error(`业务场景启用中，无法进行操作！`);
							this.currentSceneStatus = true;
							this.enableAsr = !this.enableAsr;
						} else {
							this.$message.error('ASR启用失败！');
						}
					});
			}
		},
		// 双录的启用停用
		changeAutoRecordMixedStream(row) {
			setSystemRecordOn(this.sceneData.id, !this.isAutoRecordMixedStream)
				.then(res => {
					if (res.data.success) {
						this.isAutoRecordMixedStream = !this.isAutoRecordMixedStream;
						this.$message.success(this.isAutoRecordMixedStream ? '自动双录已开启！' : '自动双录已停用！');
					} else {
						this.$message.error(res.data);
					}
				})
				.catch(error => {
					this.$message.error(error);
				});
		},
		// 字幕配置 方法
		captionConfig(row) {
			console.log('captionConfig:', row);
			if (row.id === 8) {
				console.log(this.drawTextOptions);
				this.initBizscenariosList();
				this.showCaptionDialog = true;
			}
			if (row.id === 10) {
				console.log('variable:', row);
				// 添加导航菜单
				let menu = {
					meta: {}
				};
				const { meta, name, path } = this.$route;
				menu.name = `${name}/${row.id}`;
				menu.meta.jumpNo = meta.jumpNo + 1;
				menu.meta.keepAlive = false;
				menu.meta.title = `${row.flowName}`;
				menu.meta.data = row;
				menu.meta.toPath = `/index/scene/variables/${row.id}`;
				menu.path = `${path}/${row.id}`;
				this.$store.commit('SET_TAG_LIST', menu);
				this.$router.push({ name: 'variables', params: { id: row.id, activeType: 'customer', scenId: this.sceneData.id } });
				this.sceneSetData.tableConent[9].status = true;
			}
		},
		cancelCaption() {
			this.showCaptionDialog = false;
		},
		saveCaption(form) {
			console.log('saveCaption', form);
			let data = {
				scenarioId: this.sceneData.id,
				drawTextOptions: form
			};
			setDrawTextOptions(data)
				.then(res => {
					console.log(res.data);
					this.showCaptionDialog = false;
					this.initBizscenariosList();
					this.$message.success('配置字幕成功！');
				})
				.catch(err => {
					console.log(err);
					if (err.code == '6009') {
						this.$message.error(`业务场景启用中，无法进行操作！`);
						this.currentSceneStatus = true;
					} else {
						this.$message.error('配置字幕失败！');
					}
				});
		},
		// 人工坐席TTS辅助播报按钮，启用停用方法
		changeTTSBroadcastBtnStatus(row) {
			console.log('changeTTSBroadcastBtnStatus:', row);
			this.isShowttsBroadcast = !this.isShowttsBroadcast;
			let data = {
				scenarioId: this.sceneData.id,
				enable: this.isShowttsBroadcast
			};
			setAgentTtsOption(data)
				.then(res => {
					// console.log(res.data);
					if (res.data.success === true && this.isShowttsBroadcast) {
						this.$message.success('TTS辅助播报已启用！');
					} else if (!this.isShowttsBroadcast) {
						this.$message.success('TTS辅助播报已停用！');
					}
					this.initBizscenariosList();
				})
				.catch(err => {
					console.log(err);
					if (err.code == '6009') {
						this.$message.error(`业务场景启用中，无法进行操作！`);
						this.currentSceneStatus = true;
						this.isShowttsBroadcast = !this.isShowttsBroadcast;
					} else {
						this.$message.error('TTS辅助播报已启用失败！');
					}
				});
		},
		cancelRingDuration() {
			this.showRingingDuration = false;
		},
		saveRingDuration(value) {
			if (value) {
				setRingingDuration(this.sceneData.id, { ringingDuration: Number(value) })
					.then(res => {
						console.log(res.data);
						this.$message.success('编辑来电振铃成功！');
						this.initBizscenariosList();
					})
					.catch(err => {
						console.log(err);
						if (err.code == '6009') {
							this.$message.error(`业务场景启用中，无法进行操作！`);
							this.currentSceneStatus = true;
						}
						// this.$message.error('编辑来电振铃失败！');
					});
				console.log(value, 'saveRingDuration');
			}
			this.showRingingDuration = false;
		},
		// 跳转客户信息场景变量
		customerMessage(row) {
			// 添加导航菜单
			let menu = {
				meta: {}
			};
			const { meta, name, path } = this.$route;
			menu.name = `${name}/${row.id}`;
			menu.meta.jumpNo = meta.jumpNo + 1;
			menu.meta.keepAlive = false;
			menu.meta.title = `${row.flowName}`;
			menu.meta.data = row;
			menu.meta.toPath = `/index/scene/variables/${row.id}`;
			menu.path = `${path}/${row.id}`;
			this.$store.commit('SET_TAG_LIST', menu);
			this.$router.push({ name: 'variables', params: { id: row.id, scenId: this.sceneData.id, activeType: 'customer' } });
		},
		// 跳转业务信息场景变量
		businessMessage(row) {
			// 添加导航菜单
			let menu = {
				meta: {}
			};
			const { meta, name, path } = this.$route;
			menu.name = `${name}/${row.id}`;
			menu.meta.jumpNo = meta.jumpNo + 1;
			menu.meta.keepAlive = false;
			menu.meta.title = `${row.flowName}`;
			menu.meta.data = row;
			menu.meta.toPath = `/index/scene/variables/${row.id}`;
			menu.path = `${path}/${row.id}`;
			this.$store.commit('SET_TAG_LIST', menu);
			this.$router.push({ name: 'variables', params: { id: row.id, scenId: this.sceneData.id, activeType: 'business' } });
		},
		// 实时质检相关方法事件

		// 查看
		lookOver(row) {
			// 添加导航菜单
			let menu = {
				meta: {}
			};
			const { meta, name, path } = this.$route;
			menu.name = `${name}/${row.id}`;
			menu.meta.jumpNo = meta.jumpNo + 1;
			menu.meta.keepAlive = false;
			menu.meta.title = `${row.flowName}`;
			menu.meta.data = row;
			menu.meta.toPath = `/index/scene/realQuality/${row.id}`;
			menu.path = `${path}/${row.id}`;
			this.$store.commit('SET_TAG_LIST', menu);
			this.$router.push({ name: 'realQuality', params: { id: row.id }, query: { showDisable: true, scenId: this.sceneData.id } });
			console.log(this.$route.params, 'lookOver', row);
		},
		// 编辑
		editQualityTesting(row) {
			// 添加导航菜单
			let menu = {
				meta: {}
			};
			const { meta, name, path } = this.$route;
			menu.name = `${name}/${row.id}`;
			menu.meta.jumpNo = meta.jumpNo + 1;
			menu.meta.keepAlive = false;
			menu.meta.title = `${row.flowName}`;
			menu.meta.data = row;
			menu.meta.toPath = `/index/scene/realQuality/${row.id}`;
			menu.path = `${path}/${row.id}`;
			this.$store.commit('SET_TAG_LIST', menu);
			this.$router.push({ name: 'realQuality', params: { id: row.id, scenId: this.sceneData.id } });
			console.log('editQualityTesting', row);
		},
		// 停用，启用实时质检
		async changeQualityTestingBtnStatus(row) {
			console.log('changeQualityTestingBtnStatus', row);
			try {
				this.isShowQualityTesting = !this.isShowQualityTesting;
				let params = {
					isRealTimeQualityOn: this.isShowQualityTesting
				};
				const { data } = await setIsRealTimeQualityOn(this.sceneData.id, params);
				console.log(data);
				if (data.success === true && this.isShowQualityTesting) {
					this.$message.success('实时质检启用成功！');
					this.initBizscenariosList();
				} else {
					this.$message.success('实时质检停用成功！');
				}
			} catch (error) {
				console.log(error);
				if (error.code === 6001) {
					this.isShowQualityTesting = false;
					this.$message.error('请先添加质检项!');
				} else if (error.code === 6002) {
					this.isShowQualityTesting = false;
					this.$message.error('请打开活体检测!');
				} else if (error.code === 6003) {
					this.isShowQualityTesting = false;
					this.$message.error('请打开人脸比对检测!');
				} else if (error.code === 6004) {
					this.isShowQualityTesting = false;
					this.$message.error('请打开人工通话ASR!');
				} else if (error.code == 6009) {
					this.isShowQualityTesting = !this.isShowQualityTesting;
					this.$message.error(`业务场景启用中，无法进行操作！`);
					this.currentSceneStatus = true;
				}
			}
		},
		gotoBusinessResources(row) {
			// 添加导航菜单
			// let menu = {
			// 	meta: {}
			// };
			// const { meta, name, path } = this.$route;
			// menu.name = `${name}/${row.id}`;
			// menu.meta.jumpNo = meta.jumpNo + 1;
			// menu.meta.keepAlive = false;
			// menu.meta.title = `${row.flowName}`;
			// menu.meta.data = row;
			// menu.meta.toPath = `/index/scene/businessResources/${row.id}`;
			// menu.path = `${path}/${row.id}`;
			// this.$store.commit('SET_TAG_LIST', menu);
			console.log('sceneData:', this.sceneData);
			this.$router.push({ name: 'businessResources', params: { id: this.sceneData.id } });
			console.log('businessResources', row);
		},
		changeSessionSummaryStatus(row) {
			const data = {
				enable: !this.isSessionSummaryEnabled ? 'Y' : 'N'
			};
			setSessionSummaryStatus(this.sceneData.id, data)
				.then(res => {
					this.isSessionSummaryEnabled = !this.isSessionSummaryEnabled;
					if (this.isSessionSummaryEnabled) {
						this.$message.success('会话小结已启用！');
					} else {
						this.$message.success('会话小结已停用！');
					}
				})
				.catch(err => {
					console.log(err);
					const code = String(err.code);
					if (code == '6009') {
						this.$message.error(`业务场景启用中，无法进行操作！`);
						this.currentSceneStatus = true;
					} else if (code == '1101') {
						this.$message.error('请先添加会话小结字段！');
					} else {
						this.$message.error('会话小结启用失败！');
					}
				});
		},
		editSessionSummary() {
			// TOOD: API
			// this.showSessionSummary = true;
			this.$router.push({ name: 'sessionSummary', params: { id: this.sceneData.id } });
		}
	}
};
</script>

<style lang="less">
.scene-info {
	.scene-conetent {
		.table {
			width: 70% !important;
			padding-top: 40px;
		}
	}
	.detail-link {
		.el-link--inner {
			color: #6384fe;
			border-bottom: 1px solid #6384fe;
		}
	}
	.el-table thead {
		color: #676a6c;
		tr {
			th {
				background-color: #f8f8f9;
			}
		}
	}
	.agentWorkflow-table {
		.table {
			width: 100% !important;
			padding: 0px;
		}
	}
	.groups-list-table {
		.table {
			width: 100% !important;
		}
	}
}
.form-wrapper {
	.iframelink {
		width: 100%;
		height: 100%;
		min-height: 600px;
	}
	.el-dialog {
		.el-dialog__header {
			border-bottom: 1px solid #eee;
		}
		.el-dialog__body {
			padding: 0 0 0 10px;
		}
		.el-dialog__footer {
			display: none;
		}
	}
}
</style>

<style lang="less" scoped>
.scene-info {
	.disabled {
		background-color: #999 !important;
	}
	color: #333;
	.blue-line {
		display: inline-block;
		width: 4px;
		height: 100%;
		line-height: 16px;
		margin-right: 6px;
		background: #6384fe;
	}
	.scene-label {
		font-size: 14px;
		color: #333;
		display: flex;
		align-items: center;
		height: 20px;
		font-weight: 700;
		span {
			line-height: 20px;
		}
	}
	.scene-head {
		width: 70%;
		border-bottom: 2px solid #f0f1f2;
		.create-time,
		.create-person {
			padding: 10px 10px;
			font-weight: 400;
			span {
				padding-right: 60px;
				font-size: 14px;
			}
		}
		.create-time {
			padding-top: 40px;
		}
		.create-person {
			padding-bottom: 20px;
		}
	}
	.scene-conetent {
		padding: 30px 0 20px;
	}
	.edit-btn {
		background: #6384fe;
		color: #fff;
	}
	.re-edit-btn {
		background: #6384fe;
		color: #fff;
	}
	.table-status {
		color: #b0b0b0;
		font-size: 14px;
	}
	.stop-btn {
		color: #fff;
		background-color: #ef5753;
	}
}
.testimoney {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	word-break: break-all;
	-webkit-line-clamp: 1;
}
.agentGroupLine {
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
	overflow: hidden;
	max-width: 90%;
}
</style>
